<template>
  <!--我的订单-->
  <div class="orders">
      <div class="titleWrap font14">
        <p class="titleName">我的订单</p>
        <p class="detailNav">我的订单>订单详情</p>
      </div>
      <div class="detailOut">
        <p class="detailTitle">订单信息</p>
        <!--待支付详情-->
        <div v-if="orderDetail.orderStatus === 'OS_UNPAID'">
          <div class="detailul">
            <p class="detailList">订单编号：<span>{{orderDetail.id}}</span></p>
            <p class="detailList">创建时间：<span> {{orderDetail.createTime}}</span></p>
          </div>
          <div class="detailul">
            <p class="detailList">订单状态：<span class="nopay" >待支付</span></p>
          </div>
        </div>
        <!--已关闭详情-->
        <div  v-if="orderDetail.orderStatus === 'OS_CLOSE'">
          <div class="detailul">
            <p class="detailList">订单编号：<span>{{orderDetail.id}}</span></p>
            <p class="detailList">创建时间：<span> {{orderDetail.createTime}}</span></p>
          </div>
          <div class="detailul" >
            <p class="detailList">关闭时间：<span >{{orderDetail.closeDate}}</span></p>
          </div>
          <div class="detailul">
            <p class="detailList">订单状态：<span > 已关闭</span></p>
          </div>
        </div>
        <!--已完成详情-->
        <div  v-if="orderDetail.orderStatus === 'OS_FINISH'">
          <div class="detailul">
            <p class="detailList">订单编号：<span>{{orderDetail.id}}</span></p>
          </div>
          <div class="detailul" >
            <p class="detailList">创建时间：<span> {{orderDetail.createTime}}</span></p>
            <p class="detailList">付款时间：<span >{{orderDetail.payDate}}</span></p>
          </div>
          <div class="detailul">
            <p class="detailList">订单状态：<span > 已完成</span></p>
            <p class="detailList">付款方式：<span > {{orderDetail.payTypeText}}</span></p>
          </div>
        </div>
        <ul class="orderOut">
          <li>
            <div class="orderInfo">
              <img class="orderImg" src="../../assets/continue.png" v-if="orderDetail.orderEntity === 'OT_STUDY'"/>
              <img class="orderImg" src="../../assets/examination.png" v-else-if="orderDetail.orderEntity === 'OT-EXAM'"/>
              <img class="orderImg" :src="orderDetail.orderImage " v-else/>
              <span class="orderName">{{orderDetail.orderBody}}</span>
              <div class="orderbot">
                <p class="priceNum">¥{{orderDetail.orderAmount}}</p>
              </div>
            </div>
          </li>
        </ul>
        <div class="detailBot">
          <!--待付款-->
          <div class="wancheng" v-if="orderDetail.orderStatus === 'OS_UNPAID'">
            <p>合计：¥{{orderDetail.orderAmount}}</p>
            <p>需付金额：<span>¥{{orderDetail.orderAmount}}</span></p>
            <a href="javascript;:" @click.prevent="pay" class="orderPay">立即支付</a>
            <a href="javascript;:" class="delete" @click.prevent="cancel(orderId)" >取消订单</a>
          </div>
          <!--已关闭-->
          <div v-if="orderDetail.orderStatus === 'OS_CLOSE'">
            <span class="delete"  @click="delOrder(orderId)">删除订单</span>
          </div>
          <!--已完成-->
          <div class="wancheng"  v-if="orderDetail.orderStatus === 'OS_FINISH'">
            <a href="javascript;:" @click.prevent="apply(orderId,orderDetail.title,orderDetail.orderAmount)" class="orderPay" v-if="orderDetail.isInvoice === 2">申请发票</a>
            <span class="delete" @click="delOrder(orderId)">删除订单</span>
          </div>
        </div>
      </div>
      <Spin fix v-show="isSpinShow" >
        <div class="loader">
          <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
          <div class="font14">加载中...</div>
        </div>
      </Spin>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .titleWrap {
    height: 40px;
    /*font-size: 16px;*/
    padding-bottom: 20px;
    color: #666;
    text-align: justify-all;
    border-bottom: 1px solid #E1E1E1;
    margin-bottom: 30px;
    .titleName {
      float: left;
      line-height: 24px;
      border-bottom: 3px solid #957960;
      padding-bottom: 13px;
    }
    .detailNav {
      float: right;
      font-size: 14px;
      color: #666;
      line-height: 24px;
    }
  }
  .orderName {
    display: inline-block !important;
    max-width: 100%;
  }
  .orderOut {
    li {
      padding: 20px 0;
      .orderInfo {
        padding: 0px 0 0 220px;
        position: relative;
        height: 110px;
        .orderImg {
          display: block;
          width: 200px;
          height: 110px;
          overflow: hidden;
          position: absolute;
          left: 0px;
          top: 0px;
        }
        .orderName, .orderType {
          /*font-size: 16px;*/
          color: #333;
          line-height: 24px;
          display: block;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          word-break: break-all;
          word-wrap: break-word;
        }
        .orderName {
          margin-top: 2px;
        }
        .orderName:hover {
          color: #957960;
        }
        .orderType {
          margin-top: 8px;
        }
        .orderbot {
          margin-top: 5px;
          .priceNum {
            float: left;
            font-size: 18px;
            font-weight: 600;
            height: 44px;
            line-height: 60px;
            color: #FF3300;
          }
          .orderPay {
            float: right;
            padding: 0 15px;
            min-width: 120px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            color: #fff;
            font-size: 16px;
            border-radius: 4px;
            background-color: #957960;
          }
        }
      }
    }
  }
  .detailTitle {
    font-size: 14px;
    color: #999;
  }
  .detailul {
    margin-top: 5px;
  }
  .detailList {
    font-size: 14px;
    color: #999;
    width: 45%;
    display: inline-block;
    vertical-align: middle;
    span {
      color: #666;
    }
    .nopay {
      color: #FF3300;
    }
  }
  .detailBot {
    background-color: rgba(225,225,225,0.2);
    padding: 18px 15px 18px 12px;
    text-align: right;
    p {
      font-size: 14px;
      color: #333;
      font-weight: 600;
      margin-bottom: 5px;
      span {
        color: #FF3300;
      }
    }
    .wancheng .orderPay{
      margin:0 10px;
    }
    .orderPay,.delete {
      display: inline-block;
      padding: 0 15px;
      min-width: 120px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      border-radius: 4px;
      background-color: #957960;
      margin-top: 15px;
      cursor: pointer;
    }
    .delete{
      background-color: #fff;
      border:1px solid #957960;
      color: #957960;
      margin-top: 0;
    }
  }
</style>
<script type="text/ecmascript-6">
  import {orderDetail,delOrder,centreInfoWeb,cancelOrderWeb} from '../../http'
  import {getStore} from '../../storage'
  export default {
    name: 'orderdetail',
    props: {},
    data() {
      return {
        isSpinShow:false,
        orderId:this.$route.query.orderId,
        orderDetail:'',
      };
    },
    methods: {
      //取消订单
      cancel(orderId){
        if(this.isSpinShow === false) {
          this.isSpinShow = true;
          //用户是否登录
          centreInfoWeb().then(res => {
            if (res.code === 200) {
              //取消订单
              cancelOrderWeb({orderId: orderId}).then(res => {
                if (res.code === 200) {
                  this.isSpinShow = false;
                  this.getOrderDetail()
                }else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: "个人中心提醒",
                    desc: res.info,
                    duration: 3,
                  });
                }
              }).catch()
            } else {
              this.isSpinShow = false;
              this.$parent.$refs.loginInput.showModal()
            }
          })
        }
      },
      //订单开发票
      apply(id,title,amount){
        this.$router.push({
          name:'applyfapiao',
          query:{
            invoiceBody:title,
            invoiceAmount:amount,
            orderId:id
          }
        })
      },
      //支付订单
      pay(){
        if(this.isSpinShow === false) {
          this.isSpinShow = true;
          //用户是否登录
          centreInfoWeb().then(res => {
            if (res.code === 200) {
              //订单查询
              orderDetail({orderId: this.orderId}).then(res => {
                if(res.code === 200) {
                  this.isSpinShow = false;
                  //订单未支付
                  if (res.data.orderStatus === "OS_UNPAID") {
                    this.$router.push({
                      name: 'buy',
                      query: {
                        orderId: res.data.id,
                      }
                    })
                  }
                }else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: "个人中心提醒",
                    desc: res.info,
                    duration: 3,
                  });
                }
              }).catch()
            } else {
              this.isSpinShow = false;
              this.$parent.$refs.loginInput.showModal()
            }
          }).catch()
        }
      },
      //删除订单
      delOrder(){
        if(this.isSpinShow === false) {
          this.isSpinShow = true;
          //用户是否登录
          centreInfoWeb().then(res => {
            if (res.code === 200) {
              //删除订单
              delOrder({orderId: this.orderId}).then(res => {
                if (res.code === 200) {
                  this.isSpinShow = false;
                  this.$router.push({name: 'order'});
                }else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: "个人中心提醒",
                    desc: res.info,
                    duration: 3,
                  });
                }
              }).catch()
            } else {
              this.isSpinShow = false;
              this.$parent.$refs.loginInput.showModal()
            }
          }).catch()
        }
      },
      getOrderDetail(){
        if(this.isSpinShow === false) {
          this.isSpinShow = true;
          //用户是否登录
          centreInfoWeb().then(res => {
            if (res.code === 200) {
              //订单详情查询
              orderDetail({orderId: this.orderId}).then(res => {
                if(res.code === 200) {
                  this.isSpinShow = false;
                  this.orderDetail = res.data;
                }else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: "个人中心提醒",
                    desc: res.info,
                    duration: 3,
                  });
                }
              }).catch()
            } else {
              this.isSpinShow = false;
            }
          }).catch()
        }
      }
    },
    created() {
      this.getOrderDetail()
    },
    components: {
    }
  }
</script>
